{% load staticfiles %}
<div class="modal fade" id="course_preview_modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:77%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2 class="modal-title" id="myModalLabel">Preview</h2>
            </div>
            <div class="modal-body">
                <!-- Course Picture -->
                <div class="col-lg-12">
                    {% if course.image != None and course.image != '' %}
                    <img src="{{ course.image.url }}" height="100%" width="100%" />
                    {% else %}
                    Missing Image!
                    {% endif %}
                </div>
                <!-- Course Info -->
                <div class="col-lg-12 text-left">
                    <h2>{{ course.title }}<br/>
                        {% if teacher == course.teacher %}
                        <small>[You cannot enroll in a class you currently teach!]</small>
                        {% else %}
                        <small>{{ course.sub_title }}</small>
                        {% endif %}
                    </h2>
                    {% if course.is_official %}<p align="left"><span class="badge">Offical</span></p>{% endif %}
                    <p>{{ course.description }}<p>
                    <p>Durration: {{ course.start_date }} to {{ course.finish_date }}</p>
                </div>
                <!-- /.Course Info -->
            </div>
            <div class="modal-footer">
                <button type="button"
                       class="btn btn-primary"
                data-dismiss="modal"
                        form="course_preview_form"
                     onclick="">
                    <i class="fa fa-times"></i> Close
                </button>
            </div>
        </div>
    </div>
<!-- end modal -->